<template>
  <div>
    <van-nav-bar
      class="sfaaf"
      right-text="注册"
      left-arrow
      @click-right="onClickRight('注册')"
    >
      <template #left>
        <van-icon name="cross" color="#000" size="20" @click="onClickLeft()" />
      </template>
    </van-nav-bar>
    <div style="height: 40px">
      <van-notice-bar
        v-show="showcode"
        :scrollable="true"
        left-icon="more"
        color="#1989fa"
        background="#ecf9ff"
        >您得验证码为:{{ randomcode }}</van-notice-bar
      >
    </div>
    <div class="ipt">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" placeholder="输入手机号" />
      <van-field
        v-model="sms"
        v-if="text == '密码登录'"
        clearable
        placeholder="输入验证码"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            round
            color="rgb(108,170,221)"
            @click="sendCode()"
            :disabled="disnow"
            ><div class="sendbtn">
              {{ verificationCode }}
            </div>
          </van-button>
        </template>
      </van-field>
      <van-field
        v-model="password"
        type="password"
        v-else
        placeholder="输入密码"
      />
      <span
        class="fogpwd"
        v-if="this.text == '手机号登录'"
        @click="setPassword('修改')"
        >忘记密码</span
      >
    </div>
    <div class="btn">
      <van-button
        color="rgb(30, 134, 219)"
        :disabled="!checked"
        round
        type="primary"
        size="large"
        @click="clickLogin()"
        >登录</van-button
      >
    </div>
    <div class="pwdlog">
      <span v-text="text" @click="changePwd">密码登录</span>
    </div>
    <div class="agree">
      <van-checkbox v-model="checked" icon-size="16px"
        >阅读并同意《隐私政策》并授权卡布达获取手机号</van-checkbox
      >
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Vue from "vue";
import { Toast } from "vant";
export default {
  components: {},
  mounted() {},
  computed: {
    ...mapState(["idphone", "username", "uid", "userimg"]),
  },
  data() {
    return {
      tel: "",
      sms: "",
      password: "",
      checked: false,
      text: "密码登录",
      verificationCode: "发送验证码",
      countdown: 0,
      randomcode: "",
      showcode: false,
      disnow: false,
    };
  },
  methods: {
    ...mapMutations([
      "passwordset",
      "txtset",
      "loginOK",
      "getUid",
      "updataName",
      "userImg",
    ]),
    onClickLeft() {
      this.$router.back();
    },
    clickLogin() {
      let regPhone = /^1[3456789]\d{9}$/;
      if (this.text == "密码登录") {
        if (
          regPhone.test(this.tel) &&
          this.sms == this.randomcode.toString() &&
          this.sms != ""
        ) {
          const params = `phone=${this.tel}&iscode=${this.text == "密码登录"}`;
          this.loadData();
          this.axios.post("v1/users/login", params).then((res) => {
            this.loginOK(this.tel);

            // 返回上一步路由，返回上一个标签页
            this.$router.push("/mine");
          });
        } else {
          Toast({
            message: "登录失败",
            position: "bottom",
          });
        }
      } else {
        if (regPhone.test(this.tel) && this.password != "") {
          const params = `phone=${this.tel}&userpwd=${this.password}&iscode=${
            this.text == "密码登录"
          }`;
          this.loadData();
          this.axios.post("v1/users/login", params).then((res) => {
            if (res.data.code == 200) {
              this.loginOK(this.tel);
              this.$router.push("/mine");
            } else {
              Toast({
                message: "密码错误",
                position: "bottom",
              });
            }
          });
        } else {
          Toast({
            message: "手机号有误",
            position: "bottom",
          });
        }
      }
    },
    sendCode() {
      this.randomcode = Math.floor(Math.random() * (999999 - 100000)) + 100000;
      this.countdown = 60;
      this.showcode = true;
      this.disnow = true;
      setInterval(() => {
        if (this.countdown == 0) {
          this.verificationCode = "发送验证码";
          this.disnow = false;
          return;
        } else {
          this.verificationCode = this.countdown;
        }
        this.countdown--;
      }, 300);
    },
    changePwd() {
      if (this.text == "密码登录") {
        this.text = "手机号登录";
      } else {
        this.text = "密码登录";
      }
    },
    onClickRight(str1) {
      this.passwordset(str1);
      this.txtset("注册");
      this.$router.push("/register");
    },
    setPassword(str2) {
      this.passwordset(str2);
      this.txtset("修改密码");
      this.$router.push("/register");
    },
    loadData() {
      const url = "v1/users/information";
      const params = `phone=${this.tel}`;
      this.axios.post(url, params).then((res) => {
        this.updataName(res.data.name);
        this.getUid(res.data.uid);
        this.userImg(res.data.img);
      });
    },
  },
};
</script>


<style scoped>
.sfaaf >>> .van-nav-bar__text {
  color: #000;
}
.ipt {
  margin: 0 auto;
  margin-top: 120px;
  width: 300px;
}
.ipt >>> .van-cell {
  line-height: 30px;
}

.btn {
  width: 300px;
  margin: 0 auto;
  margin-top: 30px;
}
.pwdlog {
  /* width: 300px; */
  /* margin: 0 auto; */
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
}
.pwdlog span {
  color: rgb(30, 134, 219);
}
.agree {
  width: 300px;
  text-align: center;
  font-size: 12px;
  margin: 0 auto;
  margin-top: 20px;
}
.fogpwd {
  display: block;
  font-size: 12px;
  color: rgb(30, 134, 219);
  margin-top: 10px;
  text-align: right;
}
.sendbtn {
  width: 60px;
}
</style>